Phaser.js + TypeScript + Viteでゲーム開発

Phaser.jsとは

環境構築

まずは、Phaserのプロジェクトをまとめるためのディレクトリを作って移動します。

mkdir phaser_projects
cd phaser_projects

npm init vite@latest

その後、プロジェクト名などを尋ねられるので、入力していきます。今回は以下のように設定しました。

Project name: myGame
Package name: mygame
Select a framework: vanilla
Select a variant: vanilla-ts

次に作成されたプロジェクトのディレクトリに移動して、PhaserとTypeScriptをインストールします。

cd myGame
npm install phaser --save
npm install typescript --save-dev

以上で開発環境は整いました。

入門用チュートリアル

開発環境は整いましたが、画面を作成していないため実行してもまだ何も表示されません。公式サイトに書いてある入門用チュートリアルを紹介します。

このチュートリアルを完了すると、以下のような画面を作ることができます。Phaserと書いてあるロゴが光りながら画面内を移動します。 ゲーム開発にはScene(シーン)と呼ばれるものがあり、プログラム上の画面や場面のことを指します。まずはSceneをまとめるためのディレクトリを作り、その中にMySceneというSceneを作ります。

mkdir src/scenes/
touch src/scenes/MyScene.ts

./src/scenes/MyScene.tsを編集して、以下のような内容にします。

import Phaser from "phaser";

class MyScene extends Phaser.Scene {
  constructor() {
    super({ key: 'myscene' });
  }

  preload() {
    this.load.setBaseURL("https://labs.phaser.io");

    this.load.image("sky", "assets/skies/space3.png");
    this.load.image("logo", "assets/sprites/phaser3-logo.png");
    this.load.image("red", "assets/particles/red.png");
  }

  create() {
    this.add.image(400, 300, "sky");

    const particles = this.add.particles("red");

    const emitter = particles.createEmitter({
      speed: 100,
      scale: { start: 1, end: 0 },
      blendMode: "ADD",
    });

    const logo = this.physics.add.image(400, 100, "logo");

    logo.setVelocity(100, 200);
    logo.setBounce(1, 1);
    logo.setCollideWorldBounds(true);

    emitter.startFollow(logo);
  }
}

preload関数には、ゲームのアセット(画像や音楽などの素材)を読み込む処理を書きます。このリンク(https://labs.phaser.io/assets/)には公式が用意している様々なアセットファイルがあります。上記のコードでは三つの画像を読み込んで、それぞれsky,logo,redという変数名を割り当てています。

create関数は、preload関数の後に呼び出されます。上記のコードでは、preloadで読み込んだ画像を画面上に追加しています。またCreate Emitterという光を画面に追加しています。29行目ではロゴ画像を物理オブジェクトとして画面に追加しています。それ以降では、ロゴ画像の移動速度や、跳ね返り具合、画面枠の跳ね返りの有効化などを行なっています。

ここまででSceneを作ることができました。次にSceneを表示する画面設定を行なっていきます。

./src/main.tsを編集して、以下のような内容にします。

import Phaser from "phaser";
import MyScene from "./scenes/MyScene";

const config: Phaser.Types.Core.GameConfig = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  physics: {
    default: "arcade",
    arcade: {
      gravity: { y: 200 },
    },
  },
  scene: MyScene,
};
new Phaser.Game(config);

terminalでプロジェクトのルートに移動して以下のコマンドを実行します。http://localhost:3000/をブラウザで開くとゲームが起動します。

npm run dev